<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节点</title>
    <style>
      .ul1 {
        margin-bottom: 40px;
      }

      .btn-box {
        margin-bottom: 40px;
      }

      button {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 1、获取父节点 -->
    <div class="box1">
      <div id="child"></div>
    </div>

    <!-- 2、获取所有子节点 -->
    <ul class="ul1">
      <li>我是li1</li>
      <li>我是li2</li>
      <li>我是li3</li>
      <li>我是li4</li>
    </ul>

    <!-- 5、创建节点、添加子节点 -->
    <ol>
      <li>星期一</li>
      <li>星期二</li>
      <li>星期三</li>
      <li>星期四</li>
    </ol>
    <div class="btn-box">
      <button class="before">往前面添加</button>
      <button class="after">往后面添加</button>
    </div>

    <!-- 6、删除子节点 -->
    <ul class="ul2">
      <li>熊大</li>
      <li>熊二</li>
      <li>光头强</li>
    </ul>
    <div class="btn-box2">
      <button class="remove">删除子节点</button>
    </div>

    <script>
      // 1、获取父节点
      var childEle = document.getElementById('child');
      console.log('父节点--', childEle.parentNode);

      // 2、获取所有子节点
      var ul1 = document.querySelector('.ul1');
      console.log('所有子节点--', ul1.children);

      // 3、获取第一个子节点
      console.log('第一个子节点--', ul1.firstElementChild);
      // 4、获取最后一个子节点
      console.log('最后一个子节点--', ul1.lastElementChild);

      // 5、创建节点、添加子节点
      var olEle = document.querySelector('ol');
      var before = document.querySelector('.before');
      var after = document.querySelector('.after');
      // 5.1 从前面添加
      before.onclick = function () {
        var liEle = document.createElement('li');
        liEle.innerHTML = '越努力越幸运';
        olEle.insertBefore(liEle, olEle.children[0]); // 需要指定添加位置
      };
      // 5.2 从后面添加
      after.onclick = function () {
        var liEle2 = document.createElement('li');
        liEle2.innerHTML = '星期五';
        olEle.appendChild(liEle2);
      };

      // 6、删除子节点
      var ul2 = document.querySelector('.ul2');
      var removeBtn = document.querySelector('.remove');
      removeBtn.onclick = function () {
        if (ul2.children.length) {
          ul2.removeChild(ul2.children[0]);
        } else {
          this.disabled = true;
        }
      };
    </script>
  </body>
</html>
